<template>
	<view class="bg">
		<view class="body">
			<view class="top">
				<image class="user-ava" mode="widthFix" src="../../static/avater.png" v-if="!avater"></image>
				<image class="user-ava" mode="widthFix" :src="avater" v-if="avater"></image>
			</view>
			<view class="tab">
				<view :class="['btn',status=='login'?'act':'']" @click="changeStatus('login')">登录</view>
				<view :class="['btn',status!='login'?'act':'']" @click="changeStatus('register')">注册</view>
				<!-- <view :class="['btn2',status!='login'?'act':'']" @click="changeStatus('register')" v-if="wxFlag">请绑定手机号</view> -->
			</view>
			<view>
				<view style="font-size: small;">{{lineTitle}}</view>
			</view>
			<view class="form">
				<view class="form-line" :style="{'border-bottom':phoneInput?'1px solid #629FFE':'1px solid #FFF'}">
					<view class="form-line-icon"><i class="iconfont">&#xe658;</i></view>
					<view class="form-line-split"></view>
					<view class="form-line-input">
						<input type="number" placeholder="请输入手机号" class="uni-input my-input" v-model="phone" @input="getInputPhone"
						 @focus="changeBorderBottom('phoneInput')" maxlength="11" />
					</view>
				</view>
				<view class="form-line" :style="{'border-bottom':passwordInput?'1px solid #629FFE':'1px solid #FFF'}">
					<view class="form-line-icon"><i class="iconfont" style="font-size: 20px;">&#xe639;</i></view>
					<view class="form-line-split"></view>
					<view class="form-line-input">
						<input type="text" placeholder="请输入登录密码" :password="flag1" class="uni-input my-input" v-model="password" @input="getInputPwd"
						 @focus="changeBorderBottom('passwordInput')" maxlength="16" />
					</view>
					<view class="form-line-icon" v-show="flag1"><i class="iconfont" style="font-size: 18px;color: #999;" @click="changePwdType(1)">&#xe6cf;</i></view>
					<view class="form-line-icon" v-show="!flag1"><i class="iconfont" style="font-size: 18px;color: #999;" @click="changePwdType(1)">&#xe6db;</i></view>
				</view>
				<view class="form-line" v-if="status=='register'" :style="{'border-bottom':comPwdInput?'1px solid #629FFE':'1px solid #FFF'}">
					<view class="form-line-icon"><i class="iconfont" style="font-size: 20px;">&#xe639;</i></view>
					<view class="form-line-split"></view>
					<view class="form-line-input">
						<input type="text" placeholder="请再次输入登录密码" :password="flag2" class="uni-input my-input" v-model="com_pwd" @input="getInputComPwd"
						 @focus="changeBorderBottom('comPwdInput')" maxlength="16" />
					</view>
					<view class="form-line-icon" v-show="flag2"><i class="iconfont" style="font-size: 18px;color: #999;" @click="changePwdType(2)">&#xe6cf;</i></view>
					<view class="form-line-icon" v-show="!flag2"><i class="iconfont" style="font-size: 18px;color: #999;" @click="changePwdType(2)">&#xe6db;</i></view>
				</view>
				<view class="form-line" v-if="status=='register'" :style="{'border-bottom':codeMsgInput?'1px solid #629FFE':'1px solid #FFF'}">
					<view class="form-line-icon"><i class="iconfont" style="font-size: 18px;">&#xe63a;</i></view>
					<view class="form-line-split"></view>
					<view class="form-line-input">
						<input type="text" placeholder="请输入短信验证码" class="uni-input my-input" v-model="code_msg" @input="getInputCodeMsg"
						 @focus="changeBorderBottom('codeMsgInput')" maxlength="6" />
						<view class="btn-code" @click="getMsgCode" v-if="!disabled">获取验证码</view>
						<view class="btn-code-disable" v-if="disabled">{{ss}}秒后重新获取</view>
					</view>
				</view>
				<view class="form-line" :style="{'border-bottom':codeImgInput?'1px solid #629FFE':'1px solid #FFF'}">
					<view class="form-line-icon"><i class="iconfont" style="font-size: 18px;">&#xe6df;</i></view>
					<view class="form-line-split"></view>
					<view class="form-line-input">
						<input type="text" placeholder="请输入图片验证码" class="uni-input my-input" v-model="code_img" @input="getInputCodeImg"
						 @focus="changeBorderBottom('codeImgInput')" maxlength="4" />
						<view class="img-code">
							<image :src="url" @click="getCode" mode="aspectFit" style="max-width: 100%;max-height: 100%;"></image>
						</view>
					</view>
				</view>
				<view class="form-forget" @click="goToForgetPassword" v-if="status=='login'">忘记密码</view>
			</view>

			<view class="submit">
				<view class="btn-submit" v-show="status=='login'" @click="goTologin">登录</view>
				<view class="btn-submit" v-show="status!='login'" @click="goToRegister">注册</view>
			</view>
			<!-- <view class="third" v-if="status=='register'&&wxFlag">
				<view class="text">其他登录方式</view>
				<view @click="wxLogin"><i class="iconfont" style="font-size: 32px;color: #18B566;">&#xe68c;</i></view>
			</view> -->
			<view class="agree">
				<checkbox-group style="transform:scale(0.7)" @change="checkboxChange">
					<label>
						<checkbox value="false" />
					</label>
				</checkbox-group>
				<view>我已阅读并同意<a href="#" @click="gotoYinsi">隐私政策</a>
					<a @click="openDeal(item)" v-for="(item,index) in agreements">
						《 <text style="color: #408CFF;margin: 0 3px;">{{item.title}}</text> 》
					</a>
				</view>
			</view>
		</view>
		<!-- 以下为背景样式 -->
		<view class="fixed-bg">
			<view class="bg-top-all">
				<view class="bg-top" style="background-color: rgba(255,255,255,0.16);">
					<view class="bg-fix1">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
							<path fill="#79AEFF" fill-opacity="1" d="M0,128L24,106.7C48,85,96,43,144,69.3C192,96,240,192,288,202.7C336,213,384,139,432,138.7C480,139,528,213,576,245.3C624,277,672,267,720,250.7C768,235,816,213,864,224C912,235,960,277,1008,266.7C1056,256,1104,192,1152,154.7C1200,117,1248,107,1296,117.3C1344,128,1392,160,1416,176L1440,192L1440,320L1416,320C1392,320,1344,320,1296,320C1248,320,1200,320,1152,320C1104,320,1056,320,1008,320C960,320,912,320,864,320C816,320,768,320,720,320C672,320,624,320,576,320C528,320,480,320,432,320C384,320,336,320,288,320C240,320,192,320,144,320C96,320,48,320,24,320L0,320Z"></path>
						</svg>
					</view>
				</view>
				<view class="bg-top" style="background-color: rgba(255,255,255,0.36);">
					<view class="bg-fix1">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
							<path fill="#79AEFF" fill-opacity="1" d="M0,256L24,213.3C48,171,96,85,144,80C192,75,240,149,288,160C336,171,384,117,432,112C480,107,528,149,576,186.7C624,224,672,256,720,261.3C768,267,816,245,864,208C912,171,960,117,1008,117.3C1056,117,1104,171,1152,197.3C1200,224,1248,224,1296,208C1344,192,1392,160,1416,144L1440,128L1440,320L1416,320C1392,320,1344,320,1296,320C1248,320,1200,320,1152,320C1104,320,1056,320,1008,320C960,320,912,320,864,320C816,320,768,320,720,320C672,320,624,320,576,320C528,320,480,320,432,320C384,320,336,320,288,320C240,320,192,320,144,320C96,320,48,320,24,320L0,320Z"></path>
						</svg>
					</view>
				</view>
				<view class="bg-top" style="background-color: rgba(255,255,255,0.26);">
					<view class="bg-fix1">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
							<path fill="#79AEFF" fill-opacity="1" d="M0,224L24,240C48,256,96,288,144,266.7C192,245,240,171,288,160C336,149,384,203,432,213.3C480,224,528,192,576,154.7C624,117,672,75,720,69.3C768,64,816,96,864,106.7C912,117,960,107,1008,133.3C1056,160,1104,224,1152,250.7C1200,277,1248,267,1296,266.7C1344,267,1392,277,1416,282.7L1440,288L1440,320L1416,320C1392,320,1344,320,1296,320C1248,320,1200,320,1152,320C1104,320,1056,320,1008,320C960,320,912,320,864,320C816,320,768,320,720,320C672,320,624,320,576,320C528,320,480,320,432,320C384,320,336,320,288,320C240,320,192,320,144,320C96,320,48,320,24,320L0,320Z"></path>
						</svg>
					</view>
				</view>
				<view class="bg-top" style="background-color: rgba(255,255,255,0.2);">
					<view class="bg-fix1">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
							<path fill="#79AEFF" fill-opacity="1" d="M0,128L24,117.3C48,107,96,85,144,117.3C192,149,240,235,288,266.7C336,299,384,277,432,234.7C480,192,528,128,576,133.3C624,139,672,213,720,224C768,235,816,181,864,138.7C912,96,960,64,1008,69.3C1056,75,1104,117,1152,128C1200,139,1248,117,1296,101.3C1344,85,1392,75,1416,69.3L1440,64L1440,320L1416,320C1392,320,1344,320,1296,320C1248,320,1200,320,1152,320C1104,320,1056,320,1008,320C960,320,912,320,864,320C816,320,768,320,720,320C672,320,624,320,576,320C528,320,480,320,432,320C384,320,336,320,288,320C240,320,192,320,144,320C96,320,48,320,24,320L0,320Z"></path>
						</svg>
					</view>
				</view>
			</view>
			<view class="bg-bottom-other"></view>
			<view class="bg-bottom-all">
				<view class="bg-bottom" style="background-color: rgba(255,255,255,0.26);">
					<view class="bg-fix">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
							<path margin="0" fill="#79AEFF" fill-opacity="1" d="M0,32L24,48C48,64,96,96,144,101.3C192,107,240,85,288,96C336,107,384,149,432,181.3C480,213,528,235,576,250.7C624,267,672,277,720,266.7C768,256,816,224,864,192C912,160,960,128,1008,101.3C1056,75,1104,53,1152,85.3C1200,117,1248,203,1296,224C1344,245,1392,203,1416,181.3L1440,160L1440,0L1416,0C1392,0,1344,0,1296,0C1248,0,1200,0,1152,0C1104,0,1056,0,1008,0C960,0,912,0,864,0C816,0,768,0,720,0C672,0,624,0,576,0C528,0,480,0,432,0C384,0,336,0,288,0C240,0,192,0,144,0C96,0,48,0,24,0L0,0Z"></path>
						</svg>
					</view>
				</view>
				<view class="bg-bottom" style="background-color: rgba(255,255,255,0.36);">
					<view class="bg-fix">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
							<path fill="#79AEFF" fill-opacity="1" d="M0,224L24,218.7C48,213,96,203,144,202.7C192,203,240,213,288,192C336,171,384,117,432,101.3C480,85,528,107,576,149.3C624,192,672,256,720,282.7C768,309,816,299,864,261.3C912,224,960,160,1008,138.7C1056,117,1104,139,1152,160C1200,181,1248,203,1296,186.7C1344,171,1392,117,1416,90.7L1440,64L1440,0L1416,0C1392,0,1344,0,1296,0C1248,0,1200,0,1152,0C1104,0,1056,0,1008,0C960,0,912,0,864,0C816,0,768,0,720,0C672,0,624,0,576,0C528,0,480,0,432,0C384,0,336,0,288,0C240,0,192,0,144,0C96,0,48,0,24,0L0,0Z"></path>
						</svg>
					</view>
				</view>
				<view class="bg-bottom" style="background-color: rgba(255,255,255,0.16);">
					<view class="bg-fix">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
							<path fill="#79AEFF" fill-opacity="1" d="M0,256L24,213.3C48,171,96,85,144,80C192,75,240,149,288,160C336,171,384,117,432,112C480,107,528,149,576,186.7C624,224,672,256,720,261.3C768,267,816,245,864,208C912,171,960,117,1008,117.3C1056,117,1104,171,1152,197.3C1200,224,1248,224,1296,208C1344,192,1392,160,1416,144L1440,128L1440,0L1416,0C1392,0,1344,0,1296,0C1248,0,1200,0,1152,0C1104,0,1056,0,1008,0C960,0,912,0,864,0C816,0,768,0,720,0C672,0,624,0,576,0C528,0,480,0,432,0C384,0,336,0,288,0C240,0,192,0,144,0C96,0,48,0,24,0L0,0Z"></path>
						</svg>
					</view>
				</view>
				<view class="bg-bottom" style="background-color: rgba(255,255,255,0.26);">
					<view class="bg-fix">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
							<path fill="#79AEFF" fill-opacity="1" d="M0,128L24,144C48,160,96,192,144,170.7C192,149,240,75,288,42.7C336,11,384,21,432,64C480,107,528,181,576,186.7C624,192,672,128,720,106.7C768,85,816,107,864,101.3C912,96,960,64,1008,85.3C1056,107,1104,181,1152,181.3C1200,181,1248,107,1296,96C1344,85,1392,139,1416,165.3L1440,192L1440,0L1416,0C1392,0,1344,0,1296,0C1248,0,1200,0,1152,0C1104,0,1056,0,1008,0C960,0,912,0,864,0C816,0,768,0,720,0C672,0,624,0,576,0C528,0,480,0,432,0C384,0,336,0,288,0C240,0,192,0,144,0C96,0,48,0,24,0L0,0Z"></path>
						</svg>
					</view>
				</view>
			</view>
		</view>
		<!-- 以下为查看协议 -->
		<view class="dialog-bg" v-if="showAgreement">
			<view class="dialog-body">
				<view class="dialog-top">
					<text class="dialog-top-text">请详细阅读以下协议</text>
					<text class="dialog-top-icon" @click="showAgreement=false"><i class="iconfont icon-shanchu"></i>关闭</text>
				</view>
				<view class="dialog-title">{{agreement.title}}</view>
				<view class="dialog-content">
					<view v-html="agreement.content"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		decryptDes
	} from '@/utils/utils';
	export default {
		data() {
			return {
				lineTitle: '*本应用会收集您的手机号当做您的注册账号使用*',
				status: '',
				tel: '',
				avater: '',
				url: '',
				checked: [],
				phone: '',
				code_msg: '',
				code_img: '',
				password: '',
				com_pwd: '',
				encryptedString: '', //获取的图片验证码
				phoneInput: false,
				passwordInput: false,
				comPwdInput: false,
				codeMsgInput: false,
				codeImgInput: false,
				uid_msg: '', //获取的短信验证码
				disabled: false,
				ss: 60,
				flag1: true,
				flag2: true,
				timeout: '',
				agreements: [],
				protocol: '',
				showAgreement: false, //协议内容弹窗
				wxFlag: false, //判断打开方式是否是为微信浏览器
				phoneToken: ''
			}
		},
		async onLoad(options) {
			let sessionId = '';
			uni.getStorage({
				key: 'sessionId',
				success: function(v) {
					sessionId = v.data
				}
			})
			let token = '';
			uni.getStorage({
				key: 'custoken',
				success: function(v) {
					token = v.data
				}
			})
			if (sessionId && token) {
				uni.switchTab({
					url: '../tabbar/cardList/newIndex'
				})
			}
			var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
			if (!options.status && ua.match(/MicroMessenger/i) == "micromessenger") {
				window.location.href = "/api/single-sign-on-center/customer/acquireUserWxLogin/white"
			}

			if (options.tel) {
				this.tel = options.tel;
			}
			if (options.status) {
				this.status = options.status;
			} else {
				this.status = 'login';
			}
			//已注册用户-->手机号直接回显
			if (this.status == 'login' && this.tel) {
				this.phone = this.tel;
			}
			if (options.avater) {
				this.avater = options.avater;
			}
			var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
			this.wxFlag = ua.match(/MicroMessenger/i) == "micromessenger" ? true : false;

			let objs = await this.$req.crm('agreement/getLoginProtocol/white', {
				dictType: 'C_APP'
			})
			this.agreements = objs.data ? objs.data : [];
			this.phone = this.status == 'login' && this.tel ? this.tel : '';
			this.code_msg = '';
			this.code_img = '';
			this.password = '';
			this.com_pwd = '';
			//this.encryptedString = '';
			this.uid_msg = '';
			this.timeout = '';
			this.disabled = false;
			this.ss = 60;
			
		},
		onShow() {
			this.getCode();
		},
		methods: {
			gotoYinsi() {
				uni.navigateTo({
					url: `../other/yinsi/yinsi`
				})
			},
			goToForgetPassword() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				let reg_phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (!reg_phone.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				uni.navigateTo({
					url: '../forgetPassword/forgetPassword?tel=' + this.phone
				})
			},
			//查看C端协议
			openDeal(item) {
				this.agreement = item;
				this.showAgreement = true;
			},
			changePwdType(n) {
				this['flag' + n] = !this['flag' + n];
			},
			//切换登录/注册状态
			changeStatus(status) {
				this.status = status;
				this.phone = status == 'login' && this.tel ? this.tel : '';
				this.code_msg = '';
				this.code_img = '';
				this.password = '';
				this.com_pwd = '';
				this.disabled = false;
				this.ss = 60;
				window.clearInterval(this.timeout);
				this.uid_msg = '';
				this.encryptedString = '';
				this.getCode();
			},
			//获取短信验证码
			async getMsgCode() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				let reg_phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (!reg_phone.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				//获取加密串
				let pk = await this.$req.sendCheck('/msg/pageKey.dnl', {
					messageFlag: 'XIAOXIANG'
				})
				let messageKey = decryptDes(pk.data, 'shendawl', ['s', 'h', 'e', 'n', 'd', 'a', 'w', 'l'])

				this.disabled = true;
				this.ss = 60;
				this.timeout = setInterval(v => {
					this.ss--;
					if (this.ss == 0) {
						this.disabled = false;
						window.clearInterval(this.timeout)
					}
				}, 1000)

				let backmsg = await this.$req.sendCheck('/msg/send/identifyCode', {
					uid: messageKey,
					phone: this.phone,
					messageFlag: 'XIAOXIANG',
					remark: "注册获取验证码"
				})
				this.uid_msg = backmsg.data
				console.log(this.uid_msg)
			},
			//获取图片验证码
			getCode() {
				this.$req.sendCheck('/code/send/pictureCode/uid').then(v => {
					if (v._result) {
						this.encryptedString = v.data
						this.url = '/api/oceanside-send-and-check/code/send/pictureCode/' + this.encryptedString
					}
				})
			},
			//checkbox change事件
			checkboxChange(event) {
				this.checked = event.detail.value;
			},
			//执行登录
			async goTologin() {
				let flag = this.validateForm();
				if (flag) {
					try {
						let res = await this.$req.userData('customer/loginByPhone/imgcheck/white', {
							loginName: this.phone,
							password: this.password,
							uid: this.encryptedString,
							imgCode: this.code_img,
						})


						if (res.code == 10000) {
							uni.setStorage({
								key: 'custoken',
								data: res.data.token,
								success: function(res) {}
							});
							uni.setStorage({
								key: 'sessionId',
								data: res.data.sessionId,
								success: function(res) {}
							});
							uni.showToast({
								title: '登录成功！',
								icon: 'success',
								duration: 3000
							})

							//注册成功后直接进入卡列表
							uni.switchTab({
								url: '/pages/tabbar/cardList/index'
							});
						}
					} catch (e) {
						this.code_img = '';
						this.getCode();
					}
				}
			},
			//执行注册
			async goToRegister() {
				let flag = this.validateForm();
				this.wxFlag = true
				if (flag) {
					try {
						let res = await this.$req.userData('customer/register/imgcheck/white', {
							loginName: this.phone,
							password: this.password,
							messageUid: this.uid_msg,
							msgCode: this.code_msg,
							uid: this.encryptedString,
							imgCode: this.code_img,
							wxFlag: this.wxFlag
						})

						if (res.code == 10000) {
							uni.setStorage({
								key: 'custoken',
								data: res.data.token,
								success: function(res) {

								}
							});
							uni.setStorage({
								key: 'sessionId',
								data: res.data.sessionId,
								success: function(res) {

								}
							});
							uni.showToast({
								title: '注册成功！',
								icon: 'success',
								duration: 3000
							})
							//注册成功后直接进入卡列表
							uni.switchTab({
								url: '/pages/tabbar/cardList/index'
							});
						}
					} catch (e) {
						if (e.code == 2000125 && this.wxLogin) {
							this.phoneToken = e.msg
							let r = confirm("该手机号已经在其他渠道注册过，是否将该手机号的数据合并到改微信上？")
							if (r) {
								let res = await this.$req.userData('customer/mergeCustomer', {
									phoneToken: e.msg
								})
								if (res.code = 10000) {
									uni.removeStorage({
										key: 'custoken',
										success: function(v) {
											uni.showToast({
												title: "操作成功！请刷新！",
												icon: 'none',
												duration: 3000
											})
										}
									})
									uni.removeStorage({
										key: 'sessionId',
										success: function(v) {

										}
									})
									var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
									let wxFlag = ua.match(/MicroMessenger/i) == "micromessenger" ? true : false;
									if (wxFlag) {
										window.location.href = "/api/single-sign-on-center/customer/acquireUserWxLogin/white"
									} else {
										uni.navigateTo({
											url: '../../login/login?status=login'
										})
									}
								}
							} else {
								alert("取消合并！")
							}
						}
						console.log(e)
						this.code_img = '';
						this.code_msg = '';
						this.disabled = false;
						this.ss = 60;
						window.clearInterval(this.timeout)
						this.getCode();
					}
				}
			},
			//点击微信icon登录
			wxLogin() {
				localStorage.clear();
				window.location.href = "/api/single-sign-on-center/customer/acquireUserWxLogin/white"
			},
			getInputPhone(e) {
				this.phone = e.detail.value;
				if (this.status == 'register') {
					this.uid_msg = '';
					this.code_msg = '';
					window.clearInterval(this.timeout);
					this.disabled = false;
					this.ss = 60;
				}
			},
			getInputPwd(e) {
				this.password = e.detail.value;
			},
			getInputComPwd(e) {
				this.com_pwd = e.detail.value;
			},
			getInputCodeMsg(e) {
				this.code_msg = e.detail.value;
			},
			getInputCodeImg(e) {
				this.code_img = e.detail.value;
			},
			//input组件获取焦点后border-bottom变色方法
			changeBorderBottom(val) {
				let arr = ['phoneInput', 'passwordInput', 'comPwdInput', 'codeMsgInput', 'codeImgInput'];
				for (let item of arr) {
					this[item] = item == val ? true : false;
				}
			},
			//登录或注册前表单校验方法
			validateForm() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				let reg_phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (!reg_phone.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				if (!this.password) {
					uni.showToast({
						title: '请输入登录密码',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				let reg_pwd = /^[a-zA-Z0-9]{8,16}$/;
				if (!reg_pwd.test(this.password)) {
					uni.showToast({
						title: '密码格式错误，正确格式包含数字和大小写字母，长度为8-16位',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				if (this.status == 'register') {
					if (!this.com_pwd) {
						uni.showToast({
							title: '请输入您的确认登录密码',
							icon: 'none',
							duration: 3000,
						})
						return false;
					}
					if (this.password !== this.com_pwd) {
						uni.showToast({
							title: '您输入的登录密码与确认密码不一致',
							icon: 'none',
							duration: 3000,
						})
						return false;
					}
					if (!this.code_msg) {
						uni.showToast({
							title: '请输入短信验证码',
							icon: 'none',
							duration: 3000,
						})
						return false;
					}
					if (this.code_msg.length != 6) {
						uni.showToast({
							title: '您输入的短信验证码错误',
							icon: 'none',
							duration: 3000,
						})
						return false;
					}
				}
				if (!this.code_img) {
					uni.showToast({
						title: '请输入图片验证码',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				if (this.code_img.length != 4) {
					uni.showToast({
						title: '您输入的图片验证码错误',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}

				if (this.checked.length == 0) {
					uni.showToast({
						title: '同意登录协议后方可登录',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				return true;
			},

		}
	}
</script>

<style>
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(121, 174, 255, 0.9);

	}

	.body {
		width: 100%;
		height: calc(100% - 20px);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		padding: 10px 0;
	}

	.flex-box {
		width: 100%;
		height: calc(100% - 130px);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.top {
		width: 100%;
		height: auto;
		position: relative;
		z-index: 25;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.user-ava {
		width: 16vh;
		height: 16vh;
		border-radius: 50%;
		z-index: 110;
	}

	.tab {
		width: 40%;
		height: 35px;
		background: #fff;
		position: relative;
		top: 0;
		left: 0;
		border-radius: 20px;
		display: flex;
	}

	.btn {
		width: 50%;
		height: 36px;
		font-size: 14px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: #333;
		font-weight: 500;
		letter-spacing: 5px;
	}

	.btn2 {
		width: 80%;
		height: 36px;
		font-size: 14px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: #333;
		font-weight: 500;
		letter-spacing: 5px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.act {
		background-image: linear-gradient(to right, #79AEFF 0%, #798DFF 100%);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		color: #FFFFFF;
		border-radius: 17px;
	}

	.form {
		width: 80%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		/* margin-top: 20px; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}

	.form :last-child {
		margin-bottom: 0;
	}

	.form-line {
		width: 100%;
		height: 40px;
		position: relative;
		top: 0;
		left: 0;
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* border-bottom: 1px solid #FFF; */
		/* background: rgba(255, 255, 255, 0.2); */
		background-image: linear-gradient(to top, rgba(223, 233, 243, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 20px;
	}

	.form-line-icon {
		width: 40px;
		height: 24px;
		display: inline-flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 14px;
		color: #629FFE;
		text-indent: 10px;
		line-height: 24px;
	}

	.form-line-split {
		width: 1px;
		height: 60%;
		display: inline-flex;
		background-color: #999;
	}

	.form-line-input {
		width: calc(100% - 42px);
		height: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
	}

	.my-input {
		width: 100%;
		height: 90%;
		background-color: rgba(255, 255, 255, 0);
		display: inline-flex;
		align-items: center;
		padding: 0 12px;
	}

	.uni-input-placeholder {
		color: #999;
		font-size: 14px;
	}

	.btn-code {
		width: auto;
		height: 30px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		color: #fff;
		/* background-color: #629FFE; */
		background-image: linear-gradient(to right, #79AEFF 0%, #798DFF 100%);
		margin-right: 5px;
		border-radius: 15px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 0 15px;
	}

	.btn-code-disable {
		width: auto;
		height: 30px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		color: #999;
		background-image: linear-gradient(to right, rgba(121, 174, 255, 0.5) 0%, rgba(121, 141, 255, 0.5) 100%);
		margin-right: 5px;
		border-radius: 15px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 0 15px;
	}

	.img-code {
		width: 80px;
		height: 30px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		border-radius: 3px;
		margin-right: 10px;
	}

	.form-forget {
		width: 100%;
		height: auto;
		text-align: right;
		color: #777;
		font-size: 12px;
		font-weight: 500;
	}

	.submit {
		width: 80%;
		height: 50px;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-submit {
		width: 100%;
		height: 40px;
		border-radius: 20px;
		/* background-color: #629FFE; */
		background-image: linear-gradient(to right, #79AEFF 0%, #798DFF 100%);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		color: #FFF;
		font-weight: 500;
		letter-spacing: 5px;
		text-align: center;
		line-height: 40px;
		font-size: 14px;
	}

	.third {
		width: 100%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.text {
		font-size: 14px;
		color: #444;
		font-weight: 400;
		margin-bottom: 5px;
	}

	.agree {
		width: 100%;
		height: 20px;
		position: relative;
		top: 0;
		left: 0;
		z-index: 50;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		color: #999;
	}

	uni-checkbox .uni-checkbox-input,
	.wx-checkbox-input {
		border-radius: 50% !important;
	}

	/* 底色样式 */
	.fixed-bg {
		width: 100%;
		height: 100%;
		padding: fixed;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.bg-top-all {
		width: 100%;
		height: 25%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(255, 255, 255, 0.79);
		z-index: 1;
	}

	.bg-top {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(255, 255, 255, 0.1);
		z-index: 1;
		overflow: hidden;
	}

	.bg-fix1 {
		width: 100%;
		height: auto;
		position: absolute;
		bottom: 0;
		left: 0;
		margin-bottom: -10px;
		z-index: 10;
		opacity: 0.5;
	}

	.bg-bottom-all {
		width: 100%;
		height: 25%;
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: rgba(255, 255, 255, 0.65);
		z-index: 1;
	}

	.bg-bottom {
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		overflow: hidden;
	}

	.bg-fix {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		margin-top: -3px;
		z-index: 10;
		opacity: 0.5;
	}

	.bg-bottom-other {
		width: 100%;
		height: 50%;
		position: absolute;
		top: 25%;
		left: 0;
		background-color: rgba(255, 255, 255, 0.12);
		z-index: 0;
	}

	/* --------------- 弹窗样式 ------------------ */
	.dialog-bg {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 300;
		background: rgba(0, 0, 0, 0.7);

	}

	.dialog-body {
		width: 100%;
		height: 70%;
		position: absolute;
		bottom: 0;
		left: 0;
		border-radius: 20upx 20upx 0 0;
		background-color: #FFFFFF;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		overflow: hidden;
		padding-bottom: 25px;
	}

	.dialog-top {
		width: 100%;
		height: 80upx;
		position: fixed;
		top: calc(30% - 25px);
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30upx;
		border-bottom: 1px solid #e6e6e6;
		z-index: 10;
		background-color: white;
		border-radius: 20upx 20upx 0 0;
	}

	.dialog-top-text {
		color: #333333;
		letter-spacing: 1px;
		font-weight: 400;
		margin: 0 20px;
	}

	.dialog-top-icon {
		color: #999999;
		margin: 0 20px;
	}

	.dialog-title {
		width: 90%;
		height: auto;
		position: relative;
		top: 90upx;
		left: 0;
		margin: 30upx 5%;
		line-height: 40upx;
		color: #333333;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
	}

	.dialog-content {
		width: 90%;
		height: auto;
		max-height: calc(70vh - 85px);
		position: relative;
		top: 80upx;
		left: 0;
		text-align: left;
		margin: 0 5%;
		overflow-y: scroll;
	}

	.close {
		position: absolute;
		right: 10px;
		top: 10px;
		color: #999;
	}
</style>
